<div class="bk_content_ful">
	<div class="layui-card">
		<div class="layui-tab layui-tab-brief bk_tap" lay-filter="docDemoTabBrief">
			<!-- 左侧子树 -->
			<!-- <div class=" bk-side-child" style="width: 276px;">
				<div class="layui-card bk_full has_header left_tree">
					<div class="layui-card-header">
						<div class="tree_top_ss"><input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="关键字"
							 class="layui-input">
							<i class="layui-icon search-icon"></i>
						</div>
						<h1>任免批次列表</h1>
					</div>
					<div class="bk_full">
						<div id="test1" class="demo-tree demo-tree-box"></div>
					</div>
					
				</div>
				<div class="yincang_on" id="bk_toggle">&nbsp;</div>
			</div> -->
			<!-- 右边内容区域 -->
			<div class="bk_hastap_right toggle_w">
				<div class="layui-card-header bk_header">
					<h1>任免上会管理>>预录入人员</h1>
				</div>
				<div class="bk-card-body">
					
		<form class="layui-form" action="">
			<div class="layui-row bk_search_box">
				<div class="layui-col-xs3">
					<div class="layui-form-item">
						<label class="layui-form-label">姓名:</label>
						<div class="layui-input-block">
							<input type="text" name="title" required lay-verify="required" placeholder="姓名或简/全拼音" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-xs3">
					<div class="layui-form-item">
						<label class="layui-form-label">身份证:</label>
						<div class="layui-input-block">
							<input type="text" name="title" required lay-verify="required" placeholder="全部或部分身份证" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-xs5">
					<div class="layui-form-item">
						<label class="layui-form-label">录入时间:</label>
						<div class="layui-input-block">
							<input type="text" class="layui-input inputDate" id="startTime"> &nbsp;至 &nbsp;
							<input type="text" class="layui-input inputDate" id="endTime">
						</div>
					</div>
				</div>
				<div class="right_btn"><button type="button" class="layui-btn">查询</button>
					<button type="button" class="layui-btn layui-btn-primary resize-button">重置</button></div>
			</div>
		</form>
						
					<div class="">
						<table id="demo_hash" lay-even="" lay-filter="table_data">
						</table>
					 
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container opertion-btnBox">
				 <a href="javascript:;" class="layui-btn layui-btn-xs  operaion-button" lay-event="refresh">
				  		<i class="layui-icon">&#xe669;</i> <span>刷新</span>
				 </a>
				 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="add">
				 		<i class="layui-icon">&#xe654;</i> <span>新增</span>
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="edit">
				 		<i class="layui-icon">&#xe642;</i> <span>编辑</span>
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="delete">
				 		<i class="layui-icon">&#xe640;</i> <span>删除</span>
				</a>
				<a href="javascript:;" class="  layui-btn-xs">
				 		   本次查询人数：<span class="total-color"  >10</span>人
				</a>
			 
                 <div class="form-righttool" style="float: right">
                  <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="LAYTABLE_COLS">
                   		<i class="layui-icon">&#xe610;</i> <span>显示设置</span>
                  </a>
				  <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="LAYTABLE_EXPORT">
				   		<i class="layui-icon">&#xe67d;</i> <span>导出</span>
				  </a>
                 </div>
    </div>
 </script>

<script>
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar',"laydate", 'form'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form;
			laydate = layui.laydate;
			leyuiUseDate(["#startTime", "#endTime"])
		//第一个实例

	//表格渲染
	table.render({
		// size: 'sm',
		id: "input_table",
		limit: 20,
		elem: '#demo_hash',
		toolbar: "#toolbarDemo", //false
		defaultToolbar: [],
		height: 'full-200', //表格区域的高度值124
		url: 'views/pages/meeting-manage/input-people/list.json', //数据接口
		page: true, //开启分页
		cols: [
			[ //表头
					{
									checkbox: true,
									fixed: true,
									width: '5%'	,align: "center",
								},{
					field: 'username',
					title: '姓名',
					width: 80,
					sort: true,
					align: "center"
				}, {
					field: 'sex',
					title: '性别',
					width: 80,
					sort: true,
					align: "center"
				}, {
					field: 'sfzh',
					title: '身份证号',
					width: 200,
					align: "center"
				}, {
					field: 'csny',
					title: '出生年月',
					width: 120,
					align: "center"
				}, {
					field: 'mz',
					title: '民族',
					width: 80,
					sort: true,
					align: "center"
				}, {
					field: 'gzdwjzw',
					title: '工作单位及职务(全称)',
					width: "20%",
					sort: true,
					align: "center"
				}, {
					field: 'xzj',
					title: '现职级',
					width: 120,
					align: "center"
				}, {
					field: 'rxzsj',
					title: '任现职级时间',
					width: 135,
					sort: true,
					align: "center"
				}, {
					field: 'gzdwjzw',
					title: '工作单位及职务(简称)',
					width: "20%",
					sort: true,
					align: "center"
				},
				{
					field: 'zwcc',
					title: '职务层次',
					width: 135,
					sort: true,
					align: "center"
				}
			]
		]
	});
	
	//监听工具条
	table.on('toolbar(table_data)', function(obj) {
		var checkStatus = table.checkStatus(obj.config.id);
		switch (obj.event) {
			case 'add':
				editBytton()
				break;
			case 'delete':
	
				break;
			case 'edit':
				editBytton()
	
				break;
			case 'reload':
				table.reload('input_table', {
					where: {
						username: null,
						email: null
					}
				});
	
				break;
		};
	});
	 form.render();
	});
	 // 渲染时间组件
	 function leyuiUseDate(data) {
	 	data.forEach(function(item) {
	 		laydate.render({
	 			elem: item //指定元素
	 		});
	 	})
	 }
	 // 弹出编辑框
	 function editBytton() {
	 	layer.open({
	 		type: 2,
	 		area: ['1000px', '360px'],
	 		maxmin: true,
	 		// offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
	 		id: "2", //防止重复弹出
	 		title: '人员信息编辑',
	 		content: 'views/pages/meeting-manage/input-people/peopleEdit.html',
	 		btn: ['提交', '重置'],
	 		btnAlign: 'c' //按钮居中
	 			,
	 		shade: [0.3, '#393D49'] //不显示遮罩
	 			,
	 		yes: function() {
	 			layer.closeAll();
	 		}
	 	});
	 }
</script>
 
<style scoped>
	.inputDate {
		width: 100px;
		display: inline-block;
	}
	.right_btn .resize-button{
		margin-left:10px;
		}
</style>
